<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import { type FormInstance } from "element-plus"
import { Search, Refresh } from "@element-plus/icons-vue"
import { getAllCheciIdsApi } from "@/api/ticket"
import * as echarts from 'echarts';

import { request } from "@/utils/service"
import { da } from "element-plus/es/locales.mjs";

interface TableData{
  data: number[]
}

interface RequestData{
  checiId: string
}

function getTableDataApi(params: RequestData) {
  return request<TableData>({
    url: "statistic/getRidesOnTime",
    method: "get",
    params
  })
}

defineOptions({
  // 命名当前组件
  name: "ElementPlus"
})

const loading = ref<boolean>(false)

const options = ref<number[]>([])

//#region 查
// const tableData = ref<TableData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = ref<RequestData>({
  checiId: ""
})

const handleSearch = () => {
  getTableDataApi(searchData.value)
    .then(( data ) => {
      console.log(data)
      // tableData.value = data.data
      var myChart = echarts.init(document.getElementById('my_main'));
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['06:00-08:00', '08:00-10:00', '10:00-12:00', '12:00-14:00', '14:00-16:00', '16:00-18:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147],
            data: data.data,
            type: 'line'
          }
        ]
      });
    })
    .catch(() => {
      // tableData.value = []
    })
    .finally(() => {
    })
  // paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}
//#endregion

onMounted(() => {
  // 查询所有的车次Id
  getAllCheciIdsApi()
    .then((data) => {
      options.value = data.data
    })
})

</script>

<template>
  <div class="app-container">
    <!-- 按车次和时间段统计乘坐次数 -->
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="checiId" label="车次编号">
          <!-- <el-input v-model="searchData.checiId" placeholder="请输入" /> -->
          <el-select
            v-model="searchData.checiId"
            filterable
            placeholder="Select Or Input"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div id="my_main" style="height: 600px; width: 800px;"></div>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
